<template>
    <div
        class="admin-helper"
        :style="{
            width: helperWidth
        }">
        <header>
            <strong>帮助服务</strong>
        </header>
        <section>
            <ul>
                <li>我是帮组文档列表1</li>
                <li>我是帮组文档列表2</li>
                <li>我是帮组文档列表3</li>
                <li>我是帮组文档列表4</li>
                <li>我是帮组文档列表5</li>
                <li>我是帮组文档列表6</li>
                <li>我是帮组文档列表7</li>
                <li>我是帮组文档列表8</li>
            </ul>
        </section>
        <admin-service></admin-service>
    </div>
</template>
<script>
// mapState
import { mapState } from 'vuex'

// custom components
import AdminService from '@/admin/components/Service'

export default {
    name: 'admin-helper',
    data() {
        return {}
    },
    components: {
        AdminService
    },
    computed: {
        ...mapState('adminShell/adminHelper', ['bShow', 'helperWidth'])
    },
    methods: {}
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.admin-helper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #fff;
    border-left: 1px solid @border-color-base;
}
header {
    font-size: 14px;
    height: @header-height;
    line-height: @header-height;
    padding: 0 @gap;
    border-bottom: 1px solid @border-color-base;
}
section {
    padding: @gap;
}
.service {
    margin-top: 16px;
}
</style>